<!doctype html>
<html lang="en">
    <head>
        <!-- 加载样式及META信息 -->
        {include file="common/meta" title="$title|default='博客首页'" /}

    </head>

  <body>
 
     <!-- 头部区域 -->
    <header>
         
         {include file='common/header' /}
    </header>
 



    <div class="container-fluid " style="margin-top: 20px">


 
 

      
  <div class="row">

    <div class="col-2  " style="max-width: 18rem;">
            <!-- 左侧菜单栏 -->
            <aside class="main-sidebar">
                {include file='common/menu' /}
            </aside>
   
    </div>
    <div class="col-10">




 
 <div style="margin-bottom: 20px;">
   <a href="#" class="btn btn-primary  " data-toggle="modal"  data-target="#addModal" data-id="1"  data-title="11"  data-content="1111">写博客</a>
 </div>


<table class="table table-hover" data-toggle="table">
  <thead>
    <tr>
      <th scope="col"><input type="checkbox"  id="theadInp" ></th>
      <th scope="col">ID</th>
      <th scope="col">博客标题</th>
      <th scope="col">显示/隐藏</th>
      <th scope="col">时间</th>
      <th scope="col">操作</th>
    </tr>
  </thead>
  <tbody>


      {volist name='list' id='user'}
  

        <tr>
          <td scope="row"><input type="checkbox"  ></td>
          <td scope="row">{$user.id}</td>
          <td>
             
            <a href="#"   data-toggle="modal"  data-target="#showModal" data-id="{$user.id}"  data-title="{$user.title}"  data-content="{$user.content}">{$user.title}</a>
          </td>
          <td>
       
            {if ( $user.status == 1)  }  
 
                <a class="btn btn-outline-success btn-sm" href="{:url('status', ['id' => $user.id,'status' => 0])}">显示</a>
            {else /} 

 
                <a class="btn btn-outline-secondary btn-sm " href="{:url('status', ['id' => $user.id,'status' => 1])}">隐藏</a>
            {/if}
           

          </td>
          <td>{$user.create_time}</td>
          <td>

            <a href="#" class="btn btn-outline-danger btn-sm" data-toggle="modal"  data-target="#exampleModal" data-whatever="{$user.id}"> 删除</a>



            <a href="#" class="btn btn-outline-success btn-sm" data-toggle="modal"  data-target="#editModal" data-id="{$user.id}"  data-title="{$user.title}"  data-content="{$user.content}"> 编辑</a>
 
 



           


         </td>
        </tr>
    
      {/volist}
  
  </tbody>
</table>
 
 

 


{$list|raw}
 

  
 
    </div>
    
     
  </div>
</div>
 

<!-- 编辑模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post" action="{:url('edit')}">
          <div class="form-group" style="display: none">
            <label for="recipient-name" class="col-form-label" >id:</label>
            <input type="hidden" class="form-control" id="id" name="id">
          </div>


          <div class="form-group">
            <label for="recipient-name" class="col-form-label">博客标题:</label>
            <input type="text" class="form-control" id="title" name="title">
          </div>

          <div class="form-group">
            <label for="message-text" class="col-form-label">博客内容:</label>
            <textarea class="form-control" id="conten" name="content" ></textarea>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-primary">确认编辑</button></form>
      </div>
    </div>
  </div>
</div>

<!-- 显示数据模态框 -->
<div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        
 
          <p class="lead" id="showContent">博客内容</p>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        
      </div>
    </div>
  </div>
</div>

<!-- 添加模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">写博客</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form  method="post"  action="{:url('add')}">
      <div class="modal-body">

             
             <div class="form-group">
                <label for="formGroupExampleInput">日志标题</label>
                <input type="text" name="title"  class="form-control" id="formGroupExampleInput" placeholder="填写标题...">
              </div>
             

                <div class="form-group">
                <label for="exampleFormControlTextarea1">日志内容</label>
                <textarea class="form-control" name="content"  id="exampleFormControlTextarea1" rows="3"></textarea>
              </div>
              
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-primary">发布博客</button>
      </div>
    </form>
    </div>
  </div>
</div>

<!-- 删除模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">删除确认</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post" action="{:url('blog/del')}">
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">确认删除吗？</label>
            <input type="text"  name="id" class="form-control" id="recipient-name">
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-primary">确认</button>


      </form>
      </div>
    </div>
  </div>
</div>

 
 
    <!-- 加载JS脚本 -->
    {include file="common/script" /}

 <script type="text/javascript">

// 删除确认
   $('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('删除确认 ')
  modal.find('.modal-body input').val(recipient)
})


// 编辑博客
   $('#editModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var id = button.data('id') // Extract info from data-* attributes
  var title = button.data('title') // Extract info from data-* attributes
  var content = button.data('content') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('编辑博客 ')
  modal.find('.modal-body #id').val(id)
  modal.find('.modal-body #title').val(title)
  modal.find('.modal-body textarea').val(content)
})

// 显示博客
   $('#showModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var id = button.data('id') // Extract info from data-* attributes
  var title = button.data('title') // Extract info from data-* attributes
  var content = button.data('content') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text(title)
  modal.find('.modal-body #showContent').text(content)

})


   
                //实现全选反选
                $("#theadInp").on('click', function() {
                    $("tbody input:checkbox").prop("checked", $(this).prop('checked'));
                })
 
         

 </script>


 

  </body>
</html>